<template>
	<view class="vk-mall-balance-card">
		<view class="card" :style="cardStyleCom">
			<text class="tip">{{ title }}</text>
			<text class="price">{{ valueCom }}</text>
			<view class="record" v-if="recordPage" @click="pageToRecord">
				<text>{{ recordText }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-balance-card",
	props: {
		value: {},
		recordPage: {
			Type: String
		},
		valueTips: {
			Type: String,
			default: "别急，余额获取中..."
		},
		title: {
			Type: String,
			default: "余额"
		},
		recordText: {
			Type: String,
			default: "收支记录"
		},
		backgroundImage: {
			Type: String,
			default: "linear-gradient(to right bottom, var(--main), var(--secondary))"
		}
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		pageToRecord() {
			let that = this;
			let { vk, recordPage } = that;
			vk.navigateTo(recordPage);
		}
	},
	computed: {
		cardStyleCom() {
			let str = "";
			let { backgroundImage } = this;
			str += `background-image: ${backgroundImage}`;
			return str;
		},
		valueCom() {
			let that = this;
			let { vk, value, valueTips } = that;
			if (vk.pubfn.isNull(value)) {
				return valueTips;
			} else {
				return value;
			}
		}
	}
};
</script>

<style lang="less">
.vk-mall-balance-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 10rpx;
}
.card {
	display: flex;
	flex-direction: column;
	width: 720rpx;
	height: 280rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 16rpx;
	background-size: 100% 100%;
	border-radius: 8rpx;
	color: #fff;

	.tip {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.price {
		margin-top: 8rpx;
		font-size: 72rpx;
		line-height: 92rpx;
	}
	.record {
		text-align: right;
	}
}
</style>
